<!-- 失物招领 -->
<template>
  <div>
    <myheader title="购买记录" rightBtn="首页" @updataInfo="submitRecruit"></myheader>

    <div class="payMoney" v-if="buygoods.length!=0">
      <goodsHistory :buygoods="buygoods">
        <el-pagination
          class="pagination"
          background
          style="margin-top: 1rem"
          layout="total, prev, pager, next"
          @current-change="handelChanges"
          :currentPage="currentPage"
          :page-size="pageSize"
          :total="total"
        ></el-pagination>
      </goodsHistory>
    </div>
    <van-empty v-else description="您还没有购买商品呦╮(╯▽╰)╭" />
  </div>
</template>

<script>
import myheader from '../../../comon/myheader.vue'
import goodsHistory from '../../../comon/goodsHistory.vue'
export default {
  components: {
    myheader,
    goodsHistory,
  },
  created() {
    this.getBuygoods()
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 4,
      pageCount: 1,
      total: 1,
      userId: this.$route.params.id,
      buygoods: [],
    }
  },
  methods: {
    async getBuygoods() {
      const res = await this.$axios.get(
        '/order/listByUserId?current=' +
          this.currentPage +
          '&size=' +
          this.pageSize +
          '&userId=' +
          this.userId
      )
      if (res.data.code == 200) {
        this.buygoods = res.data.data.records
        this.total = res.data.data.total
        this.pageCount = res.data.data.pages
        this.empty = false
      }
      console.log(this.buygoods)
    },
    handelChanges(val) {
      this.currentPage = val
    },
    submitRecruit() {
      this.$router.push('/')
    },
  },
}
</script>

<style scoped>
.payMoney {
  margin-top: 46px;
  margin-bottom: 100px;
}

.van-cell {
  font-size: 17px !important;
}
.goodesDerail p {
  font-size: 0.4rem;
  text-indent: 2em;
  padding: 5px;
}
.goodesDerail span {
  font-size: 0.4rem;
  padding: 14px 3px;
}
.van-card__origin-price {
  font-size: 1em !important;
  color: #fff;
}

.yield .decs {
  color: #fff !important;
  background: #fd5632;
}
.edit-address {
  color: #1989fa;
}
</style>
